<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { getCase, getCaseDetail, getCaseViewVolumeDetail } from '~/service/case'

const { locale } = useLocale()
const language = ref(locale.value === 'zh' ? 'zh' : 'en')

const { width } = useWindowSize()
const windowWidth = ref(width.value)
watch(width, (newWidth) => {
  windowWidth.value = newWidth
})

const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})

definePageMeta({
  title: '案例详情',
})

const route = useRoute()
const router = useRouter()
const id = ref('')

// 上一条数据的id
const prevId = ref('')
// 上一条数据的名字
const prevName = ref('')
// 下一条数据的名字
const nextName = ref('')
// 下一条数据的id
const nextId = ref('')

// 请求参数
const params = ref({})

// 获取案例详情
async function getCaseList() {
  prevId.value = ''
  nextId.value = ''
  await getCase(params.value).then((res: any) => {
    const index = res.list.findIndex((item: any) => item.id === id.value)

    // 上一条数据的id
    prevId.value = index <= 0 ? '' : res.list[index - 1]?.id
    // 下一条数据的id
    nextId.value = index === res.list.length - 1 ? '' : res.list[index + 1].id

    // 上一条数据的名字
    const name1 = index <= 0 ? '' : res.list[index - 1]
    prevName.value = language.value === 'zh' ? name1.title : name1.title_en
    // 下一条数据的名字
    const name2 = index === res.list.length - 1 ? '' : res.list[index + 1]
    nextName.value = language.value === 'zh' ? name2.title : name2.title_en
  })
}
// 案例详情
const caseDetail = ref<any>({
  title: '',
  type: '',
  address: '',
  publish_date: '',
  content: '',
})
// 获取案例详情
async function getCaseDetailData(id: any) {
  await getCaseDetail(id).then((res: any) => {
    caseDetail.value = res
  })
}
// 案例浏览量
const caseViewVolumeDetail = ref({})
// 获取案例浏览量
async function getCaseViewVolumeDetailData(id: any) {
  await getCaseViewVolumeDetail(id).then((res) => {
    caseViewVolumeDetail.value = res
  })
}
onMounted(async () => {
  id.value = route.query.id
  await getCaseDetailData({ id: id.value })
  await getCaseViewVolumeDetailData({ id: id.value })
  prevId.value = ''
  nextId.value = ''
  await getCaseList()
//   useHead({
//     title: `${caseDetail.value.title}-超益钢业`,
//   })
})
const { data: detailData } = await useAsyncData(async () => await getCaseDetail({ id: route.query.id }))
caseDetail.value = detailData.value

useHead({
  title: `${caseDetail.value?.title}-超益钢业`,
})
// 跳转详情页
// function toDetail(i: any) {
//   id.value = i
//   getCaseDetailData({ id: id.value })
//   getCaseViewVolumeDetailData({ id: id.value })
//   getCaseList()
// }
function toDetail(id: any) {
  router.push({
    path: '/examples/case',
    query: {
      id,
    },
  })
  setTimeout(() => {
    window.location.reload()
  })
}
</script>

<template>
  <!-- <div mt="90px" class="pl-[94px] pr-[94px]"> -->
  <div>
    <div h="[400px]" class="flex flex-col items-center justify-center bg-[url(~/assets/img/img_case——banner.png)]">
      <h1 class="text-[46px] text-[#fff]">
        {{ $t('menu.cases') }}
      </h1>
      <h2 text="uppercase [#ffffff33] [42px]">
        CASE
      </h2>
    </div>
    <section relative v-bind="$attrs">
      <div mt="[5px]" text="[18px]">
        <Breadcrumbs :items="[{ name: $t('menu.cases'), path: '/examples' }, { name: get(caseDetail, 'title', locale), path: '/news/1' }]" style="cursor: pointer;" />
        <h1 class="title">
          {{ get(caseDetail, 'title', locale) }}
        </h1>
        <div class="content">
          <span class="tag">
            {{ get(caseDetail, 'address', locale) }}
          </span>
          <span class="tag">
            {{ language === 'zh' ? '时间' : 'Date' }}: {{ caseDetail.publish_date }}
          </span>
          <span class="tag">
            {{ language === 'zh' ? '浏览量' : 'Page view' }}: {{ caseViewVolumeDetail?.viewVolume }}
          </span>
        </div>
        <div class="content" :style="{ padding: windowWidth > 828 ? '0 25%' : '0 20px' }" v-html="replaceImgUrl(get(caseDetail, 'content', locale))">
        </div>
        <div style="display: flex; justify-content: center;">
          <div class="back" @click="router.push('/examples')">
            <img src="~/assets/img/arrow-go-back-line.png" class="mb-[5px] h-[24px] w-[24px]">
            <span>
              {{ language === 'zh' ? '返回列表' : 'Back' }}
            </span>
          </div>
        </div>
      </div>
      <div class="footer">
        <span v-if="prevId" style="cursor: pointer;" @click="toDetail(prevId)">{{ language === 'zh' ? '上一篇' : 'previous' }}: {{ prevName }}</span>
        <span v-if="nextId" style="cursor: pointer;" @click="toDetail(nextId)">{{ language === 'zh' ? '下一篇' : 'next' }}: {{ nextName }}</span>
      </div>
    </section>
  </div>
  <!-- </div> -->
</template>

<style scoped>
.title {
  font-size: 34px;
  text-align: center;
}
.content {
  font-size: 18px;
  line-height: 1.8;
  margin-top: 20px;
  text-align: center;
}
.tag {
  font-size: 16px;
  display: inline-block;
  width: 200px;
}
.back {
  height: 92px;
  width: 92px;
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 106px 106px 106px 106px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666666ff;
  font-size: 14px;
  margin-top: 60px;
}
.footer {
  display: flex;
  justify-content: space-evenly;
  margin-top: 60px;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  padding: 0 94px;
  color: #666666ff;
  margin-bottom: 100px;
}
</style>
